<template>
  <div class="ysgh">
    <div class="guahao">
      <template>
        <el-radio-group @change="dChenge" v-model="msg">
          <el-radio label="all">全部</el-radio>
          <el-radio label="待就诊">待就诊</el-radio>
          <el-radio label="已就诊">已就诊</el-radio>
          <el-radio label="已取消">已取消</el-radio>
        </el-radio-group>
        <div class="block">
          <el-date-picker v-model="value1" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div class="right">
          <el-input
            placeholder="请输入医生/病人姓名"
            v-model="name"
            class="input-with-select"
          >
            <el-select v-model="select" slot="prepend" placeholder="请选择科室">
              <el-option label="内科" value="1"></el-option>
              <el-option label="外科" value="2"></el-option>
            </el-select>
            <el-button slot="append" @click="sClick">搜索</el-button>
          </el-input>
        </div>
      </template>
    </div>
    <el-table
      height="600"
      ref="multipleTable"
      :data="userDate"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="50"> </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        label="患者姓名"
        width="100"
        prop="name"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="card"
        label="就诊卡号"
        width="120"
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="idCard"
        label="身份证号"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="phone"
        label="手机号码"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="keshi"
        label="挂号科室"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="leixing"
        label="挂号类型"
        width="80px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="price"
        label="挂号费"
        width="80px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="zhuangtai"
        label="挂号状态"
        width="80px"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="date"
        label="就诊日期"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="time"
        label="候诊时间"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="yuyue"
        label="预约时间"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        header-align="center"
        align="center"
        prop="id"

        label="操作"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="onEdit(scope.row)"
              ></el-button
            >

            <el-dialog
              title="提示"
              :visible.sync="dialogVisible"
              width="50%"
              :before-close="handleClose"
            >
            <inform :inform1="inform1"></inform>
              
              <span slot="footer" class="dialog-footer">
                <el-button @click=" quxiao(scope.row) ">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false"
                  >确 定</el-button
                >
              </span>
            </el-dialog>
          <el-button type="danger" icon="el-icon-delete" circle @click="handleClick(scope.row.id)"></el-button>
        </template>
        
      </el-table-column>
    </el-table>
    <page />
  </div>
</template>

<script>
import Page from "@/views/admin/children/ys/common/page.vue";
import inform from "@/views/admin/children/ys/common/inform.vue";

import { getAdminApiYs, getAdminSearch, delAdmin } from "@/api/adminApi/adminApiYs";

export default {
  components: {
    Page,
    inform
  },
  data() {
    return {
      dialogVisible: false,
      uid: "",
      msg: "",
      name: "",
      select: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      value1: "",
      page: 1,
      userDate: [],
      inform1: null
    };
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    async dChenge(e) {
      let ret = await getAdminApiYs();
      if (e != 'all') {
        let d = ret.data.filter((item) => item.zhuangtai == e);
        this.userDate = d;
      } else {
        this.userDate = ret.data;
      }
    },
    async sClick() {
      let ret = await getAdminSearch({name: this.name});
      this.userDate = [];
      this.userDate.push(ret)
      this.name = ''
    },
    async handleClick(id) {
      let ret1 = await delAdmin({id})
      console.log(ret1);
      this.userDate = ret1
    },
    // async editClick(name) {
    //   this.$router.push("/admin/ys/second")
    //   let res = await getAdminSearch({name});
    //   // console.log(res);
    //   this.form = res;
      
    //   window.sessionStorage.setItem('users', JSON.stringify(this.form))
    // }
    async onEdit(row) {
      this.inform1 =row;
      this.dialogVisible = true
      console.log(row, "ll");
    },
    async quxiao(row){
      this.dialogVisible = false;
    }
  },
  async mounted() {
    let ret = await getAdminApiYs(this.page);
    // console.log(ret.data);
    if (ret.data.length > 0) {
      this.userDate = ret.data;
    } else {
      this.$message.error("没有更多数据了");
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./scss/index.scss";
</style>